<template>
  <n-layout style="margin-top: 20px;" >
    <n-card title="搜索">
        <n-space vertical>
          <n-radio-group v-model:value="searchForm.area" name="area" :theme-overrides="themeOverrides">
            <n-space inline>
              <n-radio-button
                  class="search"
                  v-for="type in areas"
                  :key="type.value"
                  :value="type.value"
                  :label="type.label"
                  size="large"
              />
            </n-space>
          </n-radio-group>

          <n-radio-group v-model:value="searchForm.type" name="types" size="large" :theme-overrides="themeOverrides">
            <n-space inline>
              <n-radio-button
                  v-for="type in types"
                  :key="type.value"
                  :value="type.value"
                  :label="type.label"
                  class="search"
              />
            </n-space>
          </n-radio-group>
        </n-space>
    </n-card>
    <n-card class="no_one">
      <n-thing class="tab_thing">
        <template #avatar>
          <SIcon :size="30" icon="icon-yinle4"/>
        </template>
        <template  #header>
          歌手
        </template>
        <template  #header-extra>
          <n-space inline>
            <n-input placeholder="歌手" v-model:value="searchForm.name" round/>
            <n-button  :focusable="false" @click="getSingerList"  :bordered="false" >
              <SIcon :size="22" icon="icon-icon-test"/>
            </n-button>
          </n-space>
        </template>
      </n-thing>
      <n-grid x-gap="60" :cols="5" item-style="margin-top: 30px">
        <n-gi v-for="item of singerList" style="cursor: pointer;" @click="gotoInfo(item)">
          <n-image
              preview-disabled
              :width="140"
              :height="140"
              :src="item.picUrl || 'https://dummyimage.com/140x140/b87676/fff.jpg&text=歌手'"
              fallback-src="src/assets/img/dengziqi.jpg"
          />
          <n-thing description-style="color: #B2B2B2;font-size: 12px"
                   :title="item.name"
                  >
          </n-thing>
        </n-gi>
      </n-grid>
    </n-card>
  </n-layout>
</template>
<script setup name="Singer">

import SIcon from "@/components/public/SIcon.vue";
import {useRoute} from "vue-router";
import {querySingerList} from "@/api/music/singerApi";
import {getDictSelectByTypeCode} from "@/api/system/dictApi";

const themeOverrides = {
  buttonBorderRadius: '20px'
}
const searchForm = ref({
  area:'0',
  type:'0',
})
const areas = [
  {
    value:'0',
    label:'全部',
  },
  {
    value:'1',
    label:'华语',
  },
  {
    value:'2',
    label:'港台',
  },
  {
    value:'3',
    label:'欧美',
  },
  {
    value:'4',
    label:'日韩',
  }
]
const types = [
  {
    value:'0',
    label:'全部',
  },
  {
    value:'male',
    label:'男',
  },
  {
    value:'female',
    label:'女',
  },
  {
    value:'combined',
    label:'组合',
  }
]

const singerList = ref([
])
const getSingerList = () =>{
  querySingerList(1,50,{...searchForm.value}).then(res=>{
    singerList.value = res.data?.records || []
  })
}
onMounted(()=>{
  getSingerList();
})
const router = useRouter();
const gotoInfo = (item)=>{
  router.push({
     path:`/singer/${item.id}`
   })
}
</script>
<style>
.search {
  height: 40px;width: 100px;text-align: center;line-height: 37px;
  border-radius: 20px;
}
.tab_thing{
  border-bottom: 2px solid #C10D0C;

}
.no_one{
  margin-top: 40px;
}
</style>
